<template>
  <div>
    <div v-if="previewStatus">
      {{ getLabelByValue(formRow.row[field.id]) }}
    </div>
    <el-select
      v-else
      ref="fieldEditor"
      v-model="formRow.row[field.id]"
      class="full-width-input"
      :disabled="field.options.disabled"
      :size="field.options.size"
      :clearable="field.options.clearable"
      :filterable="field.options.filterable"
      :allow-create="field.options.allowCreate"
      :automatic-dropdown="field.options.automaticDropdown"
      :multiple="field.options.multiple"
      :multiple-limit="field.options.multipleLimit"
      :placeholder="
        field.options.placeholder || i18nt('render.hint.selectPlaceholder')
      "
    >
      <el-option
        v-for="item in fieldOptions ? fieldOptions : field.options.optionItems"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </el-select>
  </div>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import tableMixin from "./tableMixin";
import i18n from "Yan/utils/i18n";

export default {
  name: "table_select_unit",
  componentName: "FieldWidget",
  mixins: [i18n, tableMixin],
  props: {
    designer: Object,
    field: Object,
    formRow: Object,
    formData: Object,
    fieldOptions: Array,
    designState: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      oldFieldValue: null,
      customOptionItems: [],
      rules: [],
    };
  },
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },
  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */
    // this.initFieldModel();
    // this.registerToRefList();
    // this.buildFieldRules();
    this.handleOnCreated();
    // this.handleOptionItemsAsync();
  },
  mounted() {
    this.initEventHandler();
  },
  methods: {
    getLabelByValue(value) {
      let options = this.field.options.optionItems;
      if (this.fieldOptions) options = this.fieldOptions;
      const res = options.find((i) => i.value === value);
      return res ? res.label : "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
</style>
